<template>
  <div class="home">
    <div class="left">
      <ul>
        <li class="img">
          <div class="echar">
            <div id="peple"></div>
            <div id="car"></div>
          </div>
        </li>
        <li>
          <div id="alarm"></div>
        </li>
        <li>
          <div id="assets"></div>
        </li>
        <li>
          <div id="energy"></div>
        </li>
      </ul>
    </div>
    <div class="right">
      <ul>
        <li>
          <div id="work"></div>
        </li>
        <li>
          <div id="room"></div>
        </li>
        <li>
          <div id="environment">
            <div class="header">
              <h4>室内环境质量统计</h4>
              <div>
                <p class="good">优</p>
                <p class="normal">良</p>
                <p class="bad">差</p>
              </div>
            </div>
            <ul class="en_top">
              <li>检测点</li>
              <li>温度<br /><span>(&deg;C)</span></li>
              <li>湿度<br /><span>（%）</span></li>
              <li>CO<sub>2</sub><br /><span>（PPM）</span></li>
              <li>PM2.5 <br /><span>(ug/cm&sup3)</span></li>
              <li>
                PM10 <br />
                <span>（ug/cm&sup3）</span>
              </li>
              <li>TVOC <br /><span>(PPB)</span></li>
            </ul>
            <div ref="scrollWrapper" class="divf">
              <div ref="scrollList" class="div">
                <ul v-for="(item, index) in elvo" :key="index" class="ul">
                  <li v-for="(i, k) in item" :key="k">
                    {{ i }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div id="forewarning"></div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onUnmounted, watchEffect, reactive } from "vue";
// import useRem from "@/utils/useRem";
import useFontSize from "@/hooks/useFontSize";
let { fontSize } = useFontSize();
import { useStore } from "@/store/index.js";
let store = useStore();
// const { getRem } = useRem();
let chartInstance = null;
let chartColor = "#fff";
// let peple = null;
// 人
const pepleOptions = ref();
const chartPeple = () => {
  let option = {
    title: {
      text: "人车数量统计",
      textStyle: {
        fontSize: 18,
        color: chartColor,
      },
      top: 10,
      left: 10,
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "5%",
      left: "center",
      textStyle: {
        color: chartColor,
        fontSize: 12,
      },
      selectedMode: false,
    },
    series: [
      {
        name: "人员",
        type: "pie",
        radius: ["40%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: "#979797",
          borderWidth: 2,
        },
        label: {
          show: true,
          position: "center",
          formatter: "927\n总人数",
          textStyle: {
            color: chartColor,
            fontSize: 16
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 790, name: "员工" },
          { value: 118, name: "访客" },
          { value: 19, name: "安保" },
        ],
      },
    ],
  };
  let pelple = document.getElementById("peple");
  chartInstance = echarts.init(pelple);
  window.addEventListener("resize", () => {
    chartInstance.resize();
  });
  chartInstance.setOption(option);
};
let chartsCar = null;
// 车
const chartCar = () => {
  let option = {
    tooltip: {
      trigger: "item",
      fontSize: 16,
    },
    legend: {
      bottom: "5%",
      left: "center",
      textStyle: {
        color: chartColor,
        fontSize: 12,
      },
      selectedMode: false,
    },
    series: [
      {
        name: "车辆",
        type: "pie",
        radius: ["40%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 2,
          borderColor: "#f0f0f0",
          borderWidth: 2,
        },
        label: {
          show: true,
          position: "center",
          formatter: "344\n 车辆总数",
          textStyle: {
            color: chartColor,
            fontSize: 16
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 340,
            name: "员工",
          },
          {
            value: 4,
            name: "访客",
          },
        ],
      },
    ],
  };
  let car = document.getElementById("car");
  chartsCar = echarts.init(car);
  chartsCar.setOption(option);
};
// 警报
let alarmCharts = null;
const alarmOption = ref({
  title: {
    text: "安防告警统计",
    textStyle: {
      fontSize: 18,
      color: chartColor,
    },
    top: 10,
    left: 10,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    position: ["90%", "10%"],
  },
  legend: {
    textStyle: {
      color: chartColor,
      fontSize: 12,
    },
    selectedMode: false,
  },
  grid: {
    left: "15%",
    top: "20%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    min: 0,
    max: 5,
    splitLine: { show: false },
    axisLabel: {
      color: chartColor,
    },
  },
  yAxis: {
    type: "category",
    // data: [100, 200, 300, 400, 500],
    axisLabel: {
      show: false,
      color: chartColor,
    },
    splitLine: { show: false },
    axisTick: {
      show: false, //不显示坐标轴刻度线
    },
  },
  series: [
    {
      name: "已完成",
      type: "bar",
      label: {
        position: "top",
        show: true,
        formatter: "紧急",
        color: chartColor,
        fontSize: 14,
      },
      data: [1.8],
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(1, 110, 232,0.2)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(1, 110, 232,1)", // 100% 处的颜色
            },
          ],
          global: false,
        },
      },
    },
    {
      name: "处理中",
      type: "bar",
      data: [],
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(121, 195, 73,0.2)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(121, 195, 73,1)", // 100% 处的颜色
            },
          ],
          global: false,
        },
      },
    },
    {
      name: "待处理",
      type: "bar",
      label: {
        position: [50, 0],
        show: true,
        formatter: "一般",
        color: chartColor,
        fontSize: 14,
      },
      data: [0],
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(189, 197, 207,0.2)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(189, 197, 207,1)", // 100% 处的颜色
            },
          ],
          global: false,
        },
      },
    },
  ],
});
const alarmFn = () => {
  let alarm = document.getElementById("alarm");
  alarmCharts = echarts.init(alarm);
  alarmCharts.setOption(alarmOption.value);
};
// 资产
let assetsCharts = null;
let isChange = ref(1);
const assetsOption = ref({
  title: {
    text: "资产分类统计",
    textStyle: {
      fontSize: 18,
      color: chartColor,
    },
    top: 10,
    left: 10,
  },
  barWidth: 10,
  xAxis: {
    type: "category",
    data: ["运输设备", "其他设备", "", "", ""],
    nameTextstyle: {
      width: 10,
    },
    axisTick: {
      show: false, //不显示坐标轴刻度线
    },
    axisLabel: {
      textStyle: {
        color: chartColor,
      },
    },
  },
  yAxis: {
    type: "value",
    min: 0,
    max: 400,
    interval: 50,
    splitLine: { show: false },
    axisTick: {
      show: false, //不显示坐标轴刻度线
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: chartColor,
      },
    },
    // data: [50, 100, 150, 200, 250, 300, 350, 400],
  },
  series: [
    {
      data: [256, 321],
      type: "bar",
      //   showBackground: true,
      backgroundStyle: {
        color: "#0361cf",
      },
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 1,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(5, 112, 242,0.2)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(5, 112, 242,1)", // 100% 处的颜色
            },
          ],
          global: false,
        },
      },
      barWidth: 30, // 固定宽度，单位为 px
      barMaxWidth: 50, // 最大宽度，单位为 px
      barGap: "200%", // 柱子之间的间距，单位为百分比，该设置在同一系列的柱子间有效
      barCategoryGap: "20%",
    },
  ],
});
const assetsFn = () => {
  let assets = document.getElementById("assets");
  assetsCharts = echarts.init(assets);
  assetsCharts.setOption(assetsOption.value);
};
// const changed1 = () => {
//   isChange.value = 1;
//   let obj = {
//     xData: ["房屋建筑物", "无形资产", "机器设备", "电子设备", "装修改良"],
//     serverDate: [5, 500, 2360, 3980, 236],
//   };
//   assetsOption.value.xAxis.data = obj.xData;
//   assetsOption.value.series[0].data = obj.serverDate;
//   console.log(assetsOption.value);
//   assetsFn();
// };
// const changed2 = () => {
//   isChange.value = 2;
//   let obj={
//     xData: ["运输设备", "其他设备", "", "", ""],
//     seriesData:[]
//   }
// };
// 能耗
let energyCharts = null;
const energyOption = ref({
  title: {
    text: "能耗统计",
    subtext:
      "年度累计同比节能" +
      (((17820290 - 15757155) / 17820290) * 100).toFixed(1) +
      "%",
    textStyle: {
      fontSize: 18,
      color: chartColor,
    },
    subtextStyle: {
      fontSize: 16,
      color: chartColor,
    },
    top: 10,
    left: 10,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  legend: {
    textStyle: {
      color: chartColor,
    },
    selectedMode: false,
  },
  grid: {
    left: "1%",
    top: "30%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    show: false,
    boundaryGap: [0, 0.01],
    axisLabel: {
      color: chartColor,
    },
  },
  yAxis: {
    type: "category",
    show: false,
    splitLine: { show: false },
    axisLabel: {
      color: chartColor,
    },
  },
  series: [
    {
      name: "去年",
      type: "bar",
      barWidth: 20,
      itemStyle: {
        normal: {
          color: function (params) {
            let colorList = ["#0b4b9a", "#c0c2c8"];
            return colorList[params.dataIndex];
          },
        },
        color: chartColor,
      },
      label: {
        position: "top",
        show: true,
        color: chartColor,
      },
      barGap: 4,
      data: [17820290, 15757155],
    },
  ],
});
const energyFn = () => {
  let energy = document.getElementById("energy");
  energyCharts = echarts.init(energy);
  energyCharts.setOption(energyOption.value);
};
// 工单
let workCharts = null;
const workFn = () => {
  let work = document.getElementById("work");
  workCharts = echarts.init(work);
  let newOption = {
    title: {
      text: "工单处理统计",
      textStyle: {
        fontSize: 18,
        color: chartColor,
      },
      top: 10,
      left: 10,
    },
    xAxis: {
      type: "value",
      data: ["8-28", "8-29", "8-30", "8-31", "9-01", "9-02", "9-03"],
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLabel: {
        textStyle: {
          color: chartColor,
        },
      },
    },
    yAxis: {
      axisLabel: {
        textStyle: {
          color: chartColor,
        },
      },
    },
    legend: {
      data: ["已关闭", "处理中", "待处理"],
      selectedMode: false,
    },
    series: [
      {
        name: "已关闭",
        type: "line",
        stack: "Total",
        label: {
          position: "top",
          show: true,
          color: chartColor,
        },
        data: [2, 8, 1, 4, 2, 3, 2],
        itemStyle: {
          color: "rgb(2, 120, 251)",
        },
      },
      {
        name: "处理中",
        type: "line",
        stack: "Total",
        label: {
          position: "top",
          show: true,
          color: chartColor,
        },
        data: [1, 7, 3, 4, 1, 5, 1],
        itemStyle: {
          color: "rgb(26, 169, 179)",
        },
      },
      ,
      {
        label: {
          position: "top",
          show: true,
          color: chartColor,
        },
        name: "待处理",
        type: "line",
        stack: "Total",
        data: [3, 2, 1, 4, 9, 1, 4],
        itemStyle: {
          color: "rgb(103, 111, 122)",
        },
      },
    ],
  };
  workCharts.setOption(fn(newOption));
};
// 会议室
let roomCharts = null;
// function fontSize(res) {
//   let clientWidth =
//     window.innerWidth ||
//     document.documentElement.clientWidth ||
//     document.body.clientWidth;
//   if (!clientWidth) return;
//   let fontSize = 100 * (clientWidth / 1920);
//   return res * fontSize;
// }
const roomFn = () => {
  let newOption = {
    title: {
      text: "会议室使用率",
      subtext: "使用率：" + (6 / 15) * 100 + "%",
      textStyle: {
        fontSize: 18,
        color: chartColor,
      },
      subtextStyle: {
        fontSize: 16,
        color: chartColor,
      },
      top: 10,
      left: 10,
    },
    xAxis: {
      data: ["8-28", "8-29", "8-30", "8-31", "9-01", "9-02", "9-03"],
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
    },
    yAxis: {
      show: false,
      splitLine: { show: false },
    },
    legend: {
      data: ["已关闭", "处理中", "待处理"],
      selectedMode: false,
    },
    series: [
      {
        name: "已使用",
        type: "bar",
        barWidth: 20,
        label: {
          position: "bottom",
          show: true,
          formatter: "已使用：6间",
          fontSize: 14,
          color: chartColor,
        },
        itemStyle: {
          color: "#0769d6",
          fontSize: 14,
        },
        data: [6],
        z: 4,
      },
      {
        barWidth: 20,
        name: "总数",
        type: "bar",
        // stack: "Total",
        barGap: "-100%",
        label: {
          position: ["70%", "-90%"],
          show: true,
          formatter: "总数：15间",
          color: chartColor,
          fontSize: 16,
        },
        itemStyle: {
          color: "#29303e",
          // fontSize: getRem(16),
        },
        data: [15],
      },
    ],
  };
  let newOption1 = reactive({ option: {} });
  newOption1.option = newOption;
  let option = fn(newOption1.option);
  option.xAxis.type = "value";
  option.xAxis.show = false;
  option.yAxis.type = "category";
  option.yAxis.show = false;
  let room = document.getElementById("room");
  roomCharts = echarts.init(room);

  roomCharts.setOption(option);
  window.addEventListener("resize", function () {
    roomCharts.resize();
  });
};
// 室内环境质量统计
const elvo = ref([
  ["JO1", 27.6, 49.7, 611, 3.4, 4.3, 11.5],
  ["JO2", 27.4, 45.4, 6202, 4.1, 4.2, 11.3],
  ["JO3", 27.4, 45.7, 579, 3.9, 4.2, 11.1],
  ["JO4", 27.6, 50.2, 6259, 3.9, 4.2, 11.1],
  ["JO1", 27.6, 49.7, 611, 3.4, 4.3, 11.5],
  ["JO2", 27.4, 45.4, 6202, 4.1, 4.2, 11.3],
  ["JO3", 27.4, 45.7, 579, 3.9, 4.2, 11.1],
  ["JO4", 27.6, 50.2, 6259, 3.9, 4.2, 11.1],
]);
let timer = null;
const startScroll = () => {
  timer = setInterval(() => {
    elvo.value.shift();
    elvo.value.push(
      ["JO1", 27.6, 49.7, 611, 3.4, 4.3, 11.5],
      ["JO2", 27.4, 45.4, 6202, 4.1, 4.2, 11.3],
      ["JO3", 27.4, 45.7, 579, 3.9, 4.2, 11.1],
      ["JO4", 27.6, 50.2, 6259, 3.9, 4.2, 11.1]
    );
  }, 1000);
};
// 智能预警统计
let fwCharts = ref(null);
const forewarning = () => {
  const option = {
    title: {
      text: "智能预警统计",
      textStyle: {
        fontSize: 18,
        color: chartColor,
      },
      top: 10,
      left: 10,
    },
    radar: {
      startAngle: -120,
      indicator: [
        { text: "资产管理", max: 6, alignTicks: false, color: chartColor },
        { text: "综合安防", max: 6, alignTicks: false, color: chartColor },
        { text: "边界通行", max: 6, alignTicks: false, color: chartColor },
        { text: "环境空间", max: 6, alignTicks: false, color: chartColor },
        { text: "设施管理", max: 6, alignTicks: false, color: chartColor },
        { text: "能效管理", max: 6, alignTicks: false, color: chartColor },
      ],
      radius: 70,
      center: ["50%", "60%"],
    },

    series: [
      {
        type: "radar",
        areaStyle: {},
        data: [{ value: [0, 2, 3, 3, 1, 2], name: "A Software" }],
        itemStyle: {
          color: "rgb(40, 110, 162)",
        },
      },
    ],
  };
  let forewarning = document.getElementById("forewarning");
  fwCharts = echarts.init(forewarning);
  fwCharts.setOption(option);
};
const fn = (obj, type) => {
  let option = {
    title: obj.title,
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: obj.xAxis.data,
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLabel: {
        color: chartColor,
      },
    },
    yAxis: {
      type: "value",
      splitLine: { show: false },
      axisLabel: {
        color: chartColor,
      },
    },
    series: obj.series,
  };
  return option;
};
const getDate = (str) => {
  if (!str) return
  let newStr = str.toString()
  // console.log(newStr);
  let arr = newStr.split(';')
  let obj = {}
  arr.forEach(item => {
    let [key, value] = item.split(':')
    if (key == '') return
    obj[key] = value
  })
  // console.log(obj);
}
watchEffect(() => {
  getDate(store.mqttMsg['zhongmi/000010/rx'])
  // console.log(store.mqttMsg['zhongmi/000010/rx']);
})
onMounted(() => {
  chartPeple();
  chartCar();
  alarmFn();
  assetsFn();
  energyFn();
  workFn();
  roomFn();
  startScroll();
  forewarning();
  window.addEventListener("resize", function () {
    roomCharts.resize();
    workCharts.resize();
    fwCharts.resize();
    energyCharts.resize();
    assetsCharts.resize();
    alarmCharts.resize();
    chartInstance.resize();
    chartsCar.resize();
  });
});

onUnmounted(() => {
  chartInstance.dispose();
  chartsCar.dispose();
  alarmCharts.dispose();
  assetsCharts.dispose();
  workCharts.dispose();
  energyCharts.dispose();
  roomCharts.dispose();
  fwCharts.dispose();
  clearInterval(timer);
});
</script>
<style scoped>
.home {
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.left {
  width: 4rem;
  height: 8.4rem;
  /* backdrop-filter: blur(20px);
  border-radius: 10px;
  background-color: rgba(2, 18, 42, 0.14); */
}

.echar {
  height: 2.1rem;
  display: flex;
  justify-content: space-between;
  align-content: center;
}

#peple {
  width: 2rem;
  height: 2.1rem;
}

.title {
  margin-top: 1vh;
  color: #fff;
}

.img {
  width: 4rem;
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
  backdrop-filter: blur(20px);
  background-color: rgba(2, 18, 42, 0.14);
}

#car {
  width: 2rem;
  height: 2.1rem;
}

#alarm {
  width: 4rem;
  height: 2.1rem;
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
}

.isAssets {
  position: relative;
}

.changed {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 40%;
  bottom: 2%;
}

.oneChanged {
  margin-right: 20px;
}

.oneChanged,
.twoChanged {
  width: 20px;
  height: 20px;
  background: #838388;
}

.isChanged {
  background: #fff;
}

#assets {
  width: 4rem;
  height: 2.1rem;
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
}

#energy {
  width: 4rem;
  height: 2.1rem;
  background: url("@/assets/bj1.png") no-repeat;
  background-size: 100% 100%;
}

#work {
  width: 4rem;
  height: 2.1rem;
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
}

#room {
  position: relative;
  width: 4rem;
  height: 1.4rem;
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
}

.right {
  width: 4rem;
  height: 100vh;
  /* background-color: red; */
}

#environment {
  color: var(--text-color);
  width: 4rem;
  height: 2.8rem;
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

#environment ul {
  font-size: 16px;
  height: 0.4rem;
}

.divf {
  height: 2rem;
  overflow: hidden;
  position: relative;
  padding: 5px;
  box-sizing: border-box;
}

#environment ul {
  width: 100%;
}

.div {
  /* height: 15vh; */
  width: 100%;
  height: 1.5rem;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
}

.div ul li {
  text-align: center;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header div {
  font-size: 16px;
  display: flex;
  position: relative;
}

.header div p {
  padding: 0.02rem 0.2rem;
  display: flex;
  align-items: center;
}

.good,
.normal,
.bad {
  position: relative;
}

.good::before {
  position: absolute;
  top: 25%;
  left: 0;
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: #7fd04e;
}

.normal::before {
  position: absolute;
  top: 25%;
  left: 0;
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: #ecb352;
}

.bad::before {
  position: absolute;
  top: 25%;
  left: 0;
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: #ae4c47;
}

.en_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}

.en_top li {
  flex: 0.5rem 0 0;
  /* width: 0.7rem; */
}

.en_top li {
  text-align: center;
}

.en_top li span {
  font-size: 12px;
}

h4 {
  font-size: 18px;
  color: #fff;
}

.ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ul li {
  flex: 0.5rem 0 0;
  height: 0.25rem;
  line-height: 0.25rem;
  text-align: center;
  position: relative;
}

.ul li::after {
  content: "";
  display: block;
  width: 0.3rem;
  position: absolute;
  left: 20%;
  bottom: 5%;
  border-bottom: 5px solid #80ce54;
}

.ul li:nth-child(2)::after {
  border-bottom: 5px solid #edb157;
}

.ul li:nth-child(1)::after {
  border-bottom: 5px solid #0773eb;
}

#forewarning {
  background: url("@/assets/bj2.png") no-repeat;
  background-size: 100% 100%;
  width: 4rem;
  height: 2.1rem;
}
</style>
